
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Canvas绘图</title>
</head>
<body style="background-color: black">
<canvas id="canvas" style="display: block;margin: 0 auto;border: 1px solid #aaa">
        您的浏览器不支持canvas
</canvas>
<input type="range"id="scale-range"min="0.5"max="3.0"step="0.01"value="0.5" style="display: block;margin: 20px auto;width: 800px"/>
<script>
    var canvas=document.getElementById("canvas");
    var slider=document.getElementById("scale-range");
    var context=canvas.getContext("2d");
    var image=new Image();
    canvas.width=1200;
    canvas.height=1600;
    window.onload=function(){

        var scale=slider.value;
    /*    context.fillStyle="red";
        context.fillRect(100,100,200,200);*/
        image.src= "../image.jpg";
        image.onload=function(){
            context.drawImage(image,0,0,canvas.width,canvas.height);
//            drawImageByScale(scale);
        }
        function drawImageByScale(scale){
            var  imageWidth=1200*scale;
            var imageHeight=1600*scale;
            var dx=canvas.width/2-imageWidth/2;
            var dy=canvas.height/2-imageHeight/2;
            context.drawImage(image,dx,dy,imageWidth,imageHeight);
        }

    }
</script>
</body>
</html>